<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery-->
    <script src="/webjars/jquery/3.4.1/jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="/webjars/layui/2.5.4/layui.js"></script>

    <link href="/webjars/layui/2.5.4/css/layui.css" type="text/css" rel="stylesheet">
    <style>

        /**为了防止摄像头左右相反**/
        #video {
            -moz-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            transform: scaleX(-1);
        }
        canvas {
            z-index: -1;
        }



    </style>
</head>
<body>
<strong>请把你的脸放摄像头面前</strong>
<video id="video" width="480" height="320" controls>
</video>

<!--<div>-->
    <!--<button id="capture">拍照</button>-->
<!--</div>-->
<!--画布-->
<canvas id="canvas" width="480" height="320" style="border: 1px red solid;margin-top: 10px"></canvas>


<input type="button" onclick="query()" value="点击识别"  />
</body>
<script type="text/javascript">
    var video = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints, success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }
    }


    function success(stream) {
        //兼容webkit核心浏览器
        var CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        console.log(stream);

        //video.src = CompatibleURL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    }

    function error(error) {
        // console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        //调用用户媒体设备, 访问摄像头
        getUserMedia({video: {width: 480, height: 320}}, success, error);
    } else {
        alert('不支持访问用户媒体');
    }


    //获取人脸照片的base64，用于发送给后台进行识别
    function getBase64() {
        var imgSrc = document.getElementById("canvas").toDataURL("image/png");
        return imgSrc.split("base64,")[1];
    };


    //人脸识别
    function query() {
        context.drawImage(video,0,0,480,320);//把流媒体数据画到convas画布上

        var base = getBase64();

        $.ajax({
            url:"/face",
            type:"post",
            dataType:"JSON",
            data:{base:base},
            success:function(resp){
                // console.log(resp);
                console.log(resp.faceData)
                //把获取的数据转化为 json数据
                var json= JSON.parse(resp.faceData);
                // console.log(json)
               var arry= json.result.face_list;


                if(resp.code>0){
                    alert("识别成功！");
                    //设置触笔颜色
                    context.strokeStyle="#ff000d"

                    for (var i = 0; i <arry.length ; i++) {
                        var location=  arry[i].location;
                        console.log(location)
                      //画空心矩形
                        context.strokeRect(location.left,location.top,location.width,location.height);
                    }


                } else {
                    alert("面容识别失败！");
                }
            },
            error:function (data) {
                console.error(data);
            }
        });

    }





</script>
</html>